<template>
  <div class="case-monitoring">
    <ModalTitle title="事案件监控预警">
      <el-date-picker
        v-model="selectMonth"
        type="month"
        format="yyyy-MM"
        value-format="yyyy-MM"
        placeholder="选择日期"
        @change="changTime"
      >
      </el-date-picker>
    </ModalTitle>
    <div class="content">
      <div class="table-th">
        <div class="rank">排名</div>
        <div class="case-type">案件类型</div>
        <div class="case-num">本月案件量</div>
        <div class="case-num-up">上月案件量</div>
        <div class="bili">与上月同期</div>
      </div>
      <div class="table-tb">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="rank">
            <template v-if="index == 0"
              ><img
                src="../static/image/one.png"
                alt=""
                style="width: 3rem; height: 3rem"
            /></template>
            <template v-else-if="index == 1"
              ><img
                src="../static/image/two.png"
                alt=""
                style="width: 3rem; height: 3rem"
            /></template>
            <template v-else-if="index == 2"
              ><img
                src="../static/image/three.png"
                alt=""
                style="width: 3rem; height: 3rem"
            /></template>
            <template v-else>{{ index }}</template>
          </div>
          <div class="case-type">{{ item.aType }}</div>
          <div class="case-num">{{ item.num }}</div>
          <div class="case-num-up">{{ item.lastMonthCompareNum }}</div>
          <div
            class="bili"
            :style="{
              color:
                item.compareNum > 0 ? 'rgb(255, 24, 0)' : 'rgb(64, 206, 137)',
            }"
          >
            {{ item.compareNum > 0 ? "⬆" : "⬇" }}{{ item.percentage }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ModalTitle from "@components/ModalTitle/Index.vue";
import { FengXianJianKong } from "@/api/zhangzi/index";
export default {
  components: { ModalTitle },
  data() {
    return {
      selectMonth: "",
      list: [],
    };
  },
  mounted() {
    this.selectMonth = this.getTime();
    this.$nextTick(() => {
      this.getEventWarning();
    });
  },
  methods: {
    getTime() {
      let D = new Date();
      let year = D.getFullYear();
      let month =
        D.getMonth() + 1 > 9 ? D.getMonth() + 1 : "0" + D.getMonth() + 1;
      return `${year}-${month}`;
    },
    changTime(value) {
      this.selectMonth = value;
      this.$nextTick(() => {
        this.getEventWarning();
      });
    },
    // 获取事案件监控预警专题
    async getEventWarning() {
      const { success, data, message } =
        await FengXianJianKong.getEventWarningAPI({
          date: this.selectMonth + "-01 00:00:00",
        });
      if (success) {
        this.list = data;
      } else {
        this.$message.error(message);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.case-monitoring {
  width: 100%;
  height: 100%;
  /deep/.el-input__inner {
    background-color: transparent;
    border-color: transparent;
    height: 3rem;
    color: #fff;
  }
  /deep/.el-input__icon {
    line-height: 3rem;
  }
  .content {
    width: 100%;
    height: calc(100% - 3.8rem);
    padding-top: 0.5rem;
    .table-th,
    .table-tb {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 3rem;
      .rank {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5rem;
        height: 3rem;
        font-size: 1.4rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fff;
        line-height: 3rem;
      }
      .case-type,
      .case-num,
      .case-num-up,
      .bili {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 7rem;
        height: 3rem;
        font-size: 1.4rem;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fff;
        line-height: 3rem;
        white-space: nowrap;
      }
    }
    .table-tb {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: calc(100% - 3rem - 0.5rem);
      margin-top: 0.5rem;
      overflow-y: auto;
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 3rem;
        margin-bottom: 1rem;
      }
    }
  }
}
</style>